<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1" />
  <title>hypergryph siren-msr img-loader</title>
  <!-- 引入依赖文件 -->
  <script src="./src/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="./src/msr-imgloader.css">
</head>

<body style="background-color:black;margin-top:20px;">

  <!-- 主要元素 -->
  <div class="anima-block"></div>

  <div style="text-align:center;margin-top:10px;">
    <div class="garbled-text ooo" style="color:#fff;">明日方舟 - hypergryph<span>1111<p>4568546546546</p></span></div>
  </div>

  <!-- 引入组件主文件 -->
  <script src="./src/msr-imgloader.js"></script>
  <script>
    $(document).ready(function () {
      // 调用动效
      msrAni.engine({
        elem: ".anima-block", // 主要元素
        width: "384px", // 元素宽度
        height: "216px", // 元素高度
        src: "./img/anyPic.jpg", // 图片地址
        timeout: 100, // 延时器
        /** 选填属性
         * unfoldSpeed: 展开速度/ms
         * twinkleSpeed: 闪烁速度/ms
         * twinkleCount: 闪烁次数
         * minOpa: 闪烁最小透明度
         * maxOpa: 闪烁最大透明度
         */
      });

      // 调用乱码

      // (性能测试)
      // for (var i = 0; i < $(".garbled-text").length; i++) {
      //   garbled.load({
      //     elem: ".garbled-text:eq(" + i + ")",
      //     timeout: 30
      //   });
      // }

      // (并发测试)
      for (var i = 0; i < 100 ; i++) {
        garbled.load({
          elem: ".garbled-text",
          timeout: 30
        });
      }
    })
  </script>
</body>

</html>